{% extends 'base.html' %}
{% block body %}

<!-- md to html generator -->
<script src="static/js/marked.min.js"></script>
<link rel="stylesheet" href="static/css/github-markdown.css">

<link rel="stylesheet" href="static/css/codemirror.css">
<style>
  .error {
    background: #ffc5c3;
  }

  .correct {
    background: #ddffd1;
  }

  .validation {
    margin: 1em 0;
    padding: 1em 1em;
    width: 100%;
    white-space: pre-wrap;
  }

  .CodeMirror {
    height: 600px;
  }

  .hidden {
    display: none;
  }

  iframe {
    min-height: 300px;
  }

  .close-icon {
    cursor: pointer;
    padding-right: 10px;
    display: inline;
  }
</style>

<div class="ui container">
  <div class="ui max-width-wrapper">
    <div class="ui secondary menu stackable">
      <a class="item active" data-tab="labeling-config">Labeling config</a>
      <a class="item" data-tab="project-settings">Project settings</a>
      <a class="item" data-tab="data-settings">Cloud storage sync</a>
    </div>

    {% include 'includes/setup_config.html' %}
    {% include "includes/setup_project.html" %}
    {% include "includes/setup_data.html" %}
  </div>
</div>

<script src="static/js/codemirror.js"></script>
<script src="static/js/xml.js"></script>


<script>
  $('.ui .accordion').accordion({collapsible: true});
  $('.menu .item').tab();

  // project management state save to/load from cookies
  function process_accordion_state(element_id, default_state) {
    var element = $(element_id);
    element.find('.title').on('click', function (event) {
      Cookies.set(element_id + '-state', !$(event.target).hasClass('active'));
      console.log('click', element_id);
    });
    if (Cookies.get(element_id + '-state', default_state) === 'true') {
      element.find('.title').addClass('active');
      element.find('.content').addClass('active');
      console.log('load', element_id);
    }
  }

  process_accordion_state('#first-help', 'true');
  process_accordion_state('#basic-templates', 'true');
  process_accordion_state('#adv-templates', 'false');
  process_accordion_state('#tab-settings', 'true');
  process_accordion_state('#project-management', 'true');
  process_accordion_state('#source-storage', 'true');
  process_accordion_state('#target-storage', 'true');
</script>


{% endblock %}
